
/**
 * @description 登录模块
 */

import React, { useRef, useState, useEffect } from 'react';
import { Button, Form, Input, Select, Spin } from 'antd';

import './login.less'

import FaceWrapper from './components/Face/index.jsx';
import VerifyCode from './components/VerifyCode.jsx';
import RotateCaptchaBox from '@/components/VerifyCaptcha';

import AbIcon from '@/components/DecorateIcons/Ab_Icon';

import { addTouchEvent, reomveTouchEvent } from "@/utils/touchEvent";


let roleList = [
  {
    value: "users",
    label: "管理员",
  },
  {
    value: 'yonghu',
    label: '用户',
  },
  {
    value: 'shanghu',
    label: '商户',
  }
]


function LoginContainer({ base }) {

  let {
    bg_type,
    background_image,
    form_animate,
    form_layout,
    title_flag,
    title_suffixFlag,
    title_suffix,
    label_flag,
    text_flag,
    text1,
    text2,
    text3,
    text4,
    icon_flag,
    icon1,
    icon2,
    icon3,
    icon4,
    code_flag,
    verify_theme,
    verify_imgUrl,
    login_text,
    forget_text,
    register_text,
    face_text,
    idea1_flag,
    idea1_text,
    idea2_flag,
    idea2_text
  } = base

  // 进入页面后默认显示的角色
  let initTableName = 'users'

  // 表单实例form
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const pageDiv = useRef(null)
  const [backgroundStyle, setBackgroundStyle] = useState({})
  // -------------------------------------
  // 行为验证码
  // -------------------------------------
  const [verifyData, setVerifyData] = useState({ open: false, resultEvent: null })

  // 验证后事件
  let resultEvent = (info) => {

    // 验证成功
    // if (info.code === 0) {
    //   setVerifyData({
    //     open: false
    //   })
    // }
  }

  /**
   * @description 表单sumbit
   */
  const showRotate = () => {

    setVerifyData({
      open: true,
      resultEvent
    })
  };


  useEffect(() => {

    // 滑动事件，控制tab
    addTouchEvent(pageDiv)

    return () => {
      reomveTouchEvent()
    }
  }, [])

  useEffect(() => {
    let newStyle = background_image ? { backgroundImage: `url(${background_image})` } : {}
    setBackgroundStyle(newStyle)
  }, [background_image])

  return (
    // 登录页面容器
    <div className='login' ref={pageDiv}>

      <div className='login-bg' style={backgroundStyle}>

        {/* 表单容器 */}
        <Form
          form={form}
          name="basic"
          layout={form_layout}
          colon={false}
          className={`login-form animate__animated animate__${form_animate}`}
          autoComplete="off"
          initialValues={{
            tableName: initTableName
          }}
          spellCheck="false"
          requiredMark={false}
        >


          <div className='login-form-wrapper'>

            {/* 表单标题 */}
            {
              title_flag &&
              <div className="title-box">
                <span className="title">林伟楠测试单----------------测试</span>
                {
                  title_suffixFlag &&
                  <span className="title-suffix">{title_suffix}</span>
                }
              </div>
            }

            {/* 账号 */}
            <Form.Item
              name="username"
              className='ab-form-item ab-form-item-user'
              rules={[
                {
                  required: true,
                  message: '请输入账号',
                },
              ]}
              label={
                label_flag ?
                  <>
                    {
                      text_flag &&
                      <span className='label-text'>{text1}</span>
                    }

                    {
                      icon_flag &&
                      <AbIcon iconName={icon1} className='label-icon' />
                    }

                  </>

                  :
                  null
              }
            >
              <Input className='ab-input-user' placeholder='请输入账号' allowClear />

            </Form.Item>

            {/* 密码 */}
            <Form.Item
              name="password"
              className='ab-form-item ab-form-item-password'
              rules={[
                {
                  required: true,
                  message: '请输入密码',
                },
              ]}
              label={
                label_flag ?
                  <>
                    {
                      text_flag &&
                      <span className='label-text'>{text2}</span>
                    }

                    {
                      icon_flag &&
                      <AbIcon iconName={icon2} className='label-icon' />
                    }

                  </>
                  :
                  null
              }
            >
              <Input.Password placeholder='请输入密码' />
            </Form.Item>

            {/* 验证码 */}
            {
              code_flag &&
              <VerifyCode base={base} />
            }


            {/* 角色 */}
            <Form.Item
              name="tableName"
              className='ab-form-item ab-form-item-role'
              rules={[
                {
                  required: true,
                  message: '请选择角色',
                },
              ]}
              label={
                label_flag ?
                  <>
                    {
                      text_flag &&
                      <span className='label-text'>{text4}</span>
                    }

                    {
                      icon_flag &&
                      <AbIcon iconName={icon4} className='label-icon' />
                    }

                  </>
                  :
                  null
              }
            >
              <Select
                className='role-box'
                options={roleList}
              />
            </Form.Item>

            {/* 按钮盒子*/}
            <div className='btn-wrapper'>

              {/* 注册 */}
              <div className='register-box'>
                {
                  roleList.map(item => (
                    <Button key={item.value} className='register-btn' type="link" size="small">{register_text}{item.label}</Button>
                  ))
                }
              </div>


              {/*  忘记密码 */}
              <div className='forget-box'>
                <Button className='forget-btn' type="link" size="small" >{forget_text}</Button>

              </div>


              {/* 登录 */}
              <div className='login-box'>
                <Button className='login-btn' type="primary" htmlType="submit" onClick={showRotate}> {login_text}</Button>
              </div>

              {/* 人脸识别 */}
              <div className='face-box'>
                <FaceWrapper btnTitle={face_text} />
              </div>

            </div>
          </div>

          {/* 2个空盒子 */}
          {
            idea1_flag &&
            <div className='idea_1'>{idea1_text}</div>
          }

          {
            idea2_flag &&
            <div className='idea_2'>{idea2_text}</div>
          }

        </Form>

      </div>


      {/* 行为验证码 */}
      <RotateCaptchaBox data={verifyData} setData={setVerifyData} imgUrl={verify_imgUrl} theme={verify_theme} />

      {/* 登录loading */}
      <Spin spinning={loading} tip='登录中...' fullscreen />
    </div >
  )
}

export default LoginContainer